<template>
  <main id="dashboard">
    <div class="top">
      <el-statistic title="客户登记数" :value="elderCountTransitionValue" />
      <el-statistic title="护工人数" :value="nurseCountTransitionValue">
        <template #suffix> 人/次 </template>
      </el-statistic>
    </div>
    <div class="charts">
      <div class="chart" ref="elderDom"></div>
      <div class="chart" ref="checkinCheckoutDom"></div>
    </div>
  </main>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { useTransition } from "@vueuse/core";
import {
  getElderCount,
  getNurseCount,
  getCheckinCheckoutMonthlyCount,
  getElderMonthlyCount,
} from "@/api/request";
const elderCount = ref(0);
const nurseCount = ref(0);
const elderDom = ref(null);
const checkinCheckoutDom = ref(null);
const elderCountTransitionValue = useTransition(elderCount, {
  duration: 1500,
});
const nurseCountTransitionValue = useTransition(nurseCount, {
  duration: 1500,
});
const checkinCheckoutMonthlyData = ref([]);
const elderMonthlyData = ref([]);

const getData = async () => {
  let data = await getElderCount();
  elderCount.value = data.data;
  data = await getNurseCount();
  nurseCount.value = data.data;
  data = await getCheckinCheckoutMonthlyCount();
  checkinCheckoutMonthlyData.value = data.data;
  data = await getElderMonthlyCount();
  elderMonthlyData.value = data.data;
};

const createCharts = (title, xData, yData, dom) => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(dom);
  const option = {
    title: {
      text: title,
      left: "center",
      textStyle: {
        color: "#d32f2f",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: xData,
      axisLabel: {
        interval: 0,
        color: "#666",
      },
      axisLine: {
        lineStyle: {
          color: "#e57373",
        },
      },
    },
    yAxis: {
      type: "value",
      minInterval: 1,
      axisLabel: {
        color: "#666",
      },
      axisLine: {
        lineStyle: {
          color: "#e57373",
        },
      },
    },
    series: [
      {
        name: "数量",
        type: "bar",
        data: yData,
        itemStyle: {
          color: "#e57373",
        },
      },
    ],
  };
  myChart.setOption(option);
};

onMounted(async () => {
  await getData();
  const elderMonths = elderMonthlyData.value.map((item) => `${item.month}月`);
  const elderCounts = elderMonthlyData.value.map((item) => item.count);
  const checkinCheckoutMonths = checkinCheckoutMonthlyData.value.map(
    (item) => `${item.month}月`
  );
  const checkinCheckoutCounts = checkinCheckoutMonthlyData.value.map(
    (item) => item.count
  );

  createCharts("客户数量统计（年）", elderMonths, elderCounts, elderDom.value);
  createCharts(
    "入住数量统计（年）",
    checkinCheckoutMonths,
    checkinCheckoutCounts,
    checkinCheckoutDom.value
  );
});
</script>
<style scoped>
#dashboard {
  padding: 20px;
  box-sizing: border-box;
}
.charts {
  display: flex;
}
.chart {
  /* width: 100%; */
  height: 500px;
  flex: 1;
}
.top {
  display: flex;
  height: 100px;
  gap: 120px;
  border: 1px solid #eee;
  border-radius: 15px;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 100px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-statistic {
  --el-statistic-content-font-size: 28px;
}
.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
  border-left: 4px solid #e57373;
}
</style>
